import React from 'react'
import {Select} from 'antd'
import { getCategoryList, getFilterList } from '../services/restData'
const Option = Select.Option;
class Filters extends React.Component {
  selectedProduct;

  constructor (props) {
    super(props)
    this.selectedProduct = [];
    this.state = {}
    this.state.defaultAppList = []
    this.state.apps = []
    this.state.channels = []
    this.state.products = []
    this.state.productDisabled = false
    this.state.filter = {
      app: null,
      channels: [],
      products: []
    }
  }
  async componentDidMount (values) {
    let [defaultAppList, apps, channels, products] =
      await Promise.all([getCategoryList(), getFilterList({
        ...this.state.filter,
        column: 'app'
      }), this.fetchChannels(), this.fetchProducts()])
    this.setState({defaultAppList: defaultAppList})
    apps = defaultAppList.filter(app => apps.includes(app.appCode));
    this.setState({apps: apps})
  }
  async fetchChannels() {
    const channels = await getFilterList({...this.state.filter, column: 'channel'})
    this.setState({channels: channels});
    return channels;
  }
  async fetchProducts() {
    const products = await getFilterList({...this.state.filter, column: 'product'})
    this.setState({products: products});
    return products;
  }
  async fetchApps() {
    let apps = await getFilterList({...this.state.filter, column: 'app'})
    apps = this.state.defaultAppList.filter(app => apps.includes(app.appCode));
    this.setState({apps: apps});
  }
  handleChange(elm, val) {
    const filter = this.state.filter;
    switch (elm) {
      case 'channel': {
        filter.channels = val;
        this.setState({filter})
        if (val.length > 1) {
          this.setState({productDisabled: true})
          filter.products = [];
        } else {
          this.setState({productDisabled: false})
          filter.products = this.selectedProduct;
        }
        this.setState({filter})
        if (this.state.filter.app == null) {
          this.fetchApps();
        }
        if (this.state.filter.products.length === 0) {
          this.fetchProducts()
        }
        break
      }
      case 'app': {
        filter.app = val;
        this.setState({filter})
        if (this.state.filter.channels.length === 0) {
          this.fetchChannels();
        }
        if (this.state.filter.products.length === 0) {
          this.fetchProducts()
        }
        break
      }
      case 'product': {
        filter.products = val;
        this.selectedProduct = val;
        this.setState({filter})
        if (this.state.filter.channels.length === 0) {
          this.fetchChannels();
        }
        if (this.state.filter.app == null) {
          this.fetchApps()
        }
        break
      }
    }
    this.props.onChange(filter);
  }

  render () {
    return (
      <div>
        <div style={{display: 'inline'}}>
          <span style={{marginRight: 10}}>Channel:</span>
          <Select
            mode='multiple'
            placeholder='Select Channel(s)'
            style={{marginRight: 15, width: 150}}
            onChange={(e) => this.handleChange('channel', e)}
            allowClear>
            {
              this.state.channels.map((channel, index) => {
                return (
                  <Option key={index} value={channel}>{channel}</Option>
                )
              })
            }
          </Select>
        </div>
        <div style={{display: 'inline'}}>
          <span style={{marginRight: 10}}>App:</span>
          <Select
            style={{marginRight: 15, width: 150}}
            placeholder='Select App'
            onChange={(e) => this.handleChange('app', e)}
            allowClear>
            {
              this.state.apps.map((app, index) => {
                return (
                  <Option key={index} value={app.appCode}>{app.appName}</Option>
                )
              })
            }
          </Select>
        </div>
        <div style={{display: 'inline'}}>
          <span style={{marginRight: 10}}>Product:</span>
          <Select
            mode='multiple'
            disabled={this.state.productDisabled}
            placeholder='Select Product'
            onChange={(e) => this.handleChange('product', e)}
            style={{marginRight: 15, width: 150}}
            allowClear>
            {
              this.state.products.map((product, index) => {
                return (
                  <Option key={index} value={product}>{product}</Option>
                )
              })
            }
          </Select>
        </div>
      </div>
    )
  }
}
export default Filters
